<template>
  <div class="attendances">
    <!-- 顶部卡片 -->
    <el-card>
      <!--   <div class="xxx">
        <div class="top"><span>学科编号</span> <el-input /></div>
        <div class="top"><span>学科名称</span> <el-input /></div>
        <div class="top"><span>创建者</span> <el-input /></div>
        <div class="top">
          <span>状态</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option value="禁用" />
            <el-option value="启用" />
          </el-select>
        </div>
      </div> -->
      <el-form label-width="70px" :inline="true" :model="form">
        <el-form-item label="学科编号">
          <el-input v-model="form.rid" @keyup.enter.native="search" />
        </el-form-item>
        <el-form-item label="学科名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option key="1" label="禁用" value="0"> </el-option>
            <el-option key="2" label="启用" value="1"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="medium" @click="search">搜索</el-button>
      <el-button size="medium" @click="del">清除</el-button>
      <el-button type="primary" @click="addClick" size="medium"
        >+新增学科</el-button
      >
    </el-card>
    <!-- 底部卡片 -->
    <el-card>
      <!-- 表格 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (form.page - 1) * form.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学科编号" prop="rid" />
        <el-table-column label="学科名称" prop="name" />
        <el-table-column label="学科简称" prop="short_name" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" prop="update_time" />
        <el-table-column label="状态">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status"
              style="display: block"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="change(row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="statusEvent(row)">{{
                row.status == '0' ? '启用' : '禁用'
              }}</el-button>
              <el-button type="text" @click="delClick(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <div class="page">
        <el-pagination
          :current-page="form.page"
          :page-sizes="[1, 2, 5, 10, 30]"
          :page-size="form.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <Add ref="add" @getData="getData" />
  </div>
</template>

<script>
import Add from './component/add.vue'
import {
  subjectlistGet,
  subjectremoveDel,
  subjectstatus
} from '@/api/subjectList'
export default {
  name: 'aaa',
  components: { Add },
  data () {
    return {
      loading: true,
      form: {
        name: '',
        page: 1,
        limit: +localStorage.getItem('setlimit') || 1,
        rid: '',
        username: '',
        status: ''
      },
      value: '',
      list: [],
      // currentPage4:2,
      total: 100
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async change (row) {
      await subjectstatus({ id: row.id })
      this.$message.success('状态修改成功')

      this.getData()
    },
    // 点击搜索筛选列表

    async search () {
      // const res = await subjectlistGet(this.form);
      // this.list = res.data.items;

      if (this.list.length === 1) {
        this.handleCurrentChange(1)
      } else {
        this.getData()
      }

      /*  this.list = this.list.filter((v) => {
        if (this.form.rid !== "") {
          if (v.rid.includes(this.form.rid)) {
            return v;
          }
        } else {
          this.getData();
        }
      }); */
    },
    // 清空
    del () {
      this.form = {
        name: '',
        page: 1,
        limit: 1,
        rid: '',
        username: '',
        status: ''
      }
      this.getData()
    },
    // 获取学科列表
    async getData () {
      const res = await subjectlistGet(this.form)
      console.log('res1111:', res)
      this.list = res.data.items
      this.total = res.data.pagination.total
      this.loading = false

      /*    this.list=this.list.filter(v=>{
        if (v.status===1) {
         return v.status='启用'
        }else{
         return v.status='禁用'
        }
      }) */
      //console.log("this.list111:", this.list);
    },
    handleSizeChange (v) {
      console.log('xxx', v)
      this.form.limit = v
      localStorage.setItem('setlimit', this.form.limit)
      this.getData()
    },
    handleCurrentChange (x) {
      // console.log(x);
      this.form.page = x
      //   ;
      this.getData()
    },
    addClick () {
      this.$refs.add.mode = 'add'
      this.$refs.add.isShow = true
    },
    //编辑学科
    edit (data) {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(data))
    },
    // 删除学科
    delClick (row) {
      this.$confirm(`您确定删除${row.name}吗？`, '提示', {
        confirmButtonText: '确定删除确定',
        cancelButtonText: '点错了',
        type: 'warning'
      }).then(async () => {
        console.log(row.id)
        await subjectremoveDel({ id: row.id })
        this.$message.success(`删除${row.name}成功`)
        if (this.form.page > 1 && this.list.length === 1) {
          this.form.page--
        }
        this.getData()
      })
    },
    // 禁用启用选择
    async statusEvent (row) {
      await subjectstatus({ id: row.id })
      this.$message.success('状态修改成功')

      this.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.xxx {
  display: flex;
  margin-bottom: 30px;
}
.attendances {
  //  padding: 30px 30px 0 30px;
  background-color: #c9c9c9;
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  color: #616266;
  .el-input {
    width: 200px;
  }
}
span {
  margin: 0 10px;
}
.page {
  text-align: center;
}
</style>
